<template>
	<div class="common_list_frame">
		<div class="common_form_wrapper" v-if="!!$slots.form">
			<slot name="form"></slot>
		</div>
		<div class="common_button_wrapper" v-if="!!$slots.button || !!$slots.handle">
			<div class="button" v-if="$slots.button">
				<slot name="button"></slot>
			</div>
			<slot name="handle"></slot>
		</div>
		<div class="common_table_wrapper" v-loading="loading" v-if="!!$slots.table">
			<slot name="table"></slot>
		</div>
		<div class="common_page_wrapper" v-if="!!$slots.page">
			<slot name="page"></slot>
		</div>
		<slot></slot>
	</div>
</template>

<script>
export default {
	props: {
		loading: { type: Boolean, default: false }
	}
};
</script>

<style lang="scss" scoped>
.common_list_frame {
	display: flex;
	flex-direction: column;
	height: 100%;
	flex: 1;
	& > div {
		flex-shrink: 0;
		margin-bottom: 16px;
		&:last-child {
			margin-bottom: 0;
		}
	}
}
.common_form_wrapper::v-deep {
	.el-form {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.el-form-item {
		margin-bottom: 0;
		&:last-child {
			margin-right: 0;
		}
	}
	.el-form-item__content {
		font-size: 0;
		line-height: 1;
	}
}
.common_button_wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.common_table_wrapper {
	flex: 1;
	overflow: hidden;
	border: solid 1px #e6ebf5;
	border-bottom: none;
}
.common_page_wrapper::v-deep {
	flex-shrink: 0;
	.el-pagination {
		padding: 0;
	}
	.pagination-container {
		height: 28px;
		margin: 0 !important;
		padding: 0 !important;
	}
}
</style>
